<template>
<a-modal :visible="true" width="60%" :title="showTitle + '问题'" @cancel="reset" :footer="null"> 
  <div>
    <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
      <a-form-item label="所属小程序" v-if="!info">
        <a-select
          @change="barndChange"
          v-decorator="[
            'brandId',
            {
              rules: [
                {
                  required: true,
                  message: '请选择所属小程序'
                }
              ]
            }
          ]"
          placeholder="全部"
        >
          <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="问题分类" v-if="!info">
        <a-select
          :disabled="disable"
          v-decorator="[
            'categoryId',
            {
              rules: [
                {
                  required: true,
                  message: '请选择问题分类'
                }
              ]
            }
          ]"
          placeholder="全部"
        >
          <a-select-option :value="item.id" v-for="item in categoyList" :key="item.id">
            {{ item.categoryName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="问题来源"
        v-if="!info"
        extra="若问题可通用于多个小程序，请在问题库创建后再选择，以便统一维护问题；若问题属于某一个小程序特有问题，请单独自行添加。"
      >
        <a-radio-group
          @change="questionStateChange"
          v-decorator="[
            'questionState',
            {
              rules: [
                {
                  required: true,
                  message: '请选择问题来源'
                }
              ],
              initialValue: 'GLOBAL'
            }
          ]"
        >
          <a-radio value="GLOBAL">
            问题库选择
          </a-radio>
          <a-radio value="PRIVATE">
            自行添加
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="选择问题" v-if="questionState == 'GLOBAL' && isCanEdit">
        <a-select
          show-search
          optionFilterProp="children"
          @search="handleSearch"
          placeholder="请输入问题标题"
          v-decorator="[
            'tikuId',
            {
              rules: [
                {
                  required: true,
                  message: '请选择问题'
                }
              ]
            }
          ]"
        >
        <a-spin v-if="fetching" slot="notFoundContent" size="small" />
          <a-select-option :value="item.id" v-for="item in questionList" :key="item.id">
            {{ item.question }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <div v-else>
        <a-form-item label="问题跳转方式">
          <a-radio-group
            :disabled="!isCanEdit"
            @change="jumpWayChange"
            v-decorator="[
              'jumpWay',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择问题跳转方式'
                  }
                ],
                initialValue: 'ANSWER'
              }
            ]"
          >
            <a-radio value="ANSWER">
              问题详情页
            </a-radio>
            <a-radio value="KEFU">
              人工客服
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="问题标题">
          <a-input
            placeholder="请输入标题"
            :disabled="!isCanEdit"
            :maxLength="30"
            v-decorator="[
              'title',
              {
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '请输入标题'
                  }
                ]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="接待客服组ID" v-if="jumpWay == 'KEFU'">
          <a-input-number
            style="width:100%"
            placeholder="请输入接待客服组ID"
            :disabled="!isCanEdit"
            v-decorator="[
              'kefuGroupId',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入接待客服组ID问题'
                  }
                ]
              }
            ]"
          ></a-input-number>
        </a-form-item>
        <a-form-item label="问题答案" v-else>
          <a-textarea
            style="height:100px"
            :disabled="!isCanEdit"
            placeholder="请输入答案"
            :maxLength="300"
            v-decorator="[
              'answer',
              {
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '请输入答案'
                  }
                ]
              }
            ]"
          ></a-textarea>
        </a-form-item>
      </div>
      <div class="tip" v-if="!isCanEdit">该问题为通用问题库内问题，无法自行修改哦，请在通用问题库修改问题哦~</div>
      <a-row>
        <a-col :span="24" class="info-action">
          <a-button type="primary" @click="reset">返回</a-button>
          <a-button type="primary" html-type="submit" class="ml-20" :loading="loading">保存</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
  </a-modal>
</template>
<script>
import { brands } from '../../util/brand'
import { addkf, getCategories, getiku, getDetails } from '@/api/micromall'
export default {
  data() {
    return {
      brands,
      disable: true,
      loading: false,
      categories: [
        { id: 1, name: '紧急问题' },
        { id: 2, name: '错误问题' },
        { id: 3, name: '一般问题' }
      ],
      fetching:false,
      questions: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 4 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 20 },
          sm: { span: 20 }
        }
      },
      questionState: 'GLOBAL',
      categoyList: [],
      questionList: [],
      questionValue: '',
      jumpWay: '',
      questionInfo: null,
      isCanEdit: true,
      showTitle:''
    }
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler: async function(n) {
        if (n) {
          this.showTitle = '编辑'
          const re = await getDetails({ id: n.tikuId })
          if (re.code == 200) {
            this.questionInfo = re.data
            n = re.data
            this.jumpWay = n.jumpWay || ''
            this.questionState = n.state || ''
            if (n.state == 'GLOBAL') {
              this.isCanEdit = false
            }
            this.$nextTick(() => {
              this.form.setFieldsValue({
                jumpWay: n.jumpWay,
                title: n.question
              })
              if (n.jumpWay == 'KEFU') {
                this.form.setFieldsValue({
                  kefuGroupId: n.kefuGroupId
                })
              } else {
                this.form.setFieldsValue({
                  answer: n.answer
                })
              }
            })
          } else {
            this.$message(re.msg)
          }
        } else {
          this.questionState = 'GLOBAL'
          this.showTitle = '新增'
          this.isCanEdit = true
          this.form.resetFields()
        }
      }
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'problemForm' })
  },
  mounted() {
    this.getQuestions()
  },
  methods: {
    handleSearch(value) {
      this.getQuestions(value)
    },
    questionStateChange(e) {
      this.questionState = e.target.value
      if (e.target.value == 'GLOBAL') {
        this.getQuestions()
      }
    },
    jumpWayChange(e) {
      this.jumpWay = e.target.value
      if (this.questionInfo) {
        this.$nextTick(() => {
          if (e.target.value == 'KEFU') {
            this.form.setFieldsValue({
              kefuGroupId: this.questionInfo.kefuGroupId || ''
            })
          } else {
            this.form.setFieldsValue({
              answer: this.questionInfo.answer || ''
            })
          }
        })
      }
    },
    barndChange(e) {
      if (e) {
        this.disable = false
      }
      this.getcategoryList(e)
    },
    async getQuestions(title) {
      this.fetching = true;
      const re = await getiku({ title, current: 1, size: 1000 })
      this.fetching = false;
      if (re.code == 200) {
        this.questionList = re.data.records
      } else {
        this.$message.error(re, msg)
      }
    },
    async getcategoryList(brandId) {
      const re = await getCategories({ brandId })
      if (re.code == 200) {
        this.categoyList = re.data
      } else {
        this.$message.error(re.msg)
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    async submit(values) {
      const { info } = this
      if (info) {
        values.id = info.id
      }
      values.type = 1
      const obj = { ...values }
      if (values.kefuGroupId) {
        values.kefuGroupId = parseInt(values.kefuGroupId)
      }
      const re = await addkf(values)
      if (re.code == 200) {
        this.$message.success(info ? '编辑成功' : '新增成功')
        this.reset()
      } else {
        this.$message.error(re.msg)
      }
    },
    reset() {
      this.form.resetFields()
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
.tip {
  padding-left: 17%;
  color: orange;
  margin-bottom: 30px;
}
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
</style>
